<template>
  <!-- 营业时间选择弹框 -->
  <uni-popup ref="businessHoursPopup" type="bottom">
    <view class="business-hours-modal">
      <view class="picker-header">
        <text class="picker-cancel" @click="cancel">取消</text>
        <text class="picker-title">选择营业时间</text>
        <text class="picker-confirm" @click="confirm">确定</text>
      </view>

      <view class="time-sections">
        <!-- 开始时间 -->
        <view class="time-section">
          <view class="section-label">开始时间</view>
          <picker-view
            class="picker-view"
            :value="startPickerValue"
            @change="startPickerChange"
            :indicator-style="indicatorStyle"
          >
            <picker-view-column>
              <view v-for="hour in hours" :key="hour" class="picker-item">
                {{ hour }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="minute in minutes" :key="minute" class="picker-item">
                {{ minute }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>

        <view class="time-separator">
          <text class="separator-text">至</text>
        </view>

        <!-- 结束时间 -->
        <view class="time-section">
          <view class="section-label">结束时间</view>
          <picker-view
            class="picker-view"
            :value="endPickerValue"
            @change="endPickerChange"
            :indicator-style="indicatorStyle"
          >
            <picker-view-column>
              <view v-for="hour in hours" :key="hour" class="picker-item">
                {{ hour }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="minute in minutes" :key="minute" class="picker-item">
                {{ minute }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue", "confirm"]);

// 弹框引用
const businessHoursPopup = ref(null);

// 时间数据
const hours = ref([]);
const minutes = ref([]);
const startPickerValue = ref([9, 0]); // 默认 09:00
const endPickerValue = ref([21, 0]); // 默认 21:00
const indicatorStyle = "height: 68rpx;";

// 初始化时间数据
const initTimeData = () => {
  // 小时: 00-23
  for (let i = 0; i < 24; i++) {
    hours.value.push(String(i).padStart(2, "0"));
  }
  // 分钟: 00-59
  for (let i = 0; i < 60; i++) {
    minutes.value.push(String(i).padStart(2, "0"));
  }
};

initTimeData();

// 对外暴露方法
const open = () => {
  // 如果有初始值，解析并同步到滚轮
  if (props.modelValue && props.modelValue.includes("-")) {
    const [startTime, endTime] = props.modelValue.split("-");

    // 解析开始时间
    const [startHour, startMinute] = startTime.split(":");
    const startHourIdx = hours.value.findIndex((h) => h === startHour);
    const startMinuteIdx = minutes.value.findIndex((m) => m === startMinute);
    if (startHourIdx !== -1 && startMinuteIdx !== -1) {
      startPickerValue.value = [startHourIdx, startMinuteIdx];
    }

    // 解析结束时间
    const [endHour, endMinute] = endTime.split(":");
    const endHourIdx = hours.value.findIndex((h) => h === endHour);
    const endMinuteIdx = minutes.value.findIndex((m) => m === endMinute);
    if (endHourIdx !== -1 && endMinuteIdx !== -1) {
      endPickerValue.value = [endHourIdx, endMinuteIdx];
    }
  }
  businessHoursPopup.value?.open();
};

const close = () => {
  businessHoursPopup.value?.close();
};

defineExpose({ open, close });

// 开始时间选择器变化
const startPickerChange = (e) => {
  startPickerValue.value = e.detail.value;
};

// 结束时间选择器变化
const endPickerChange = (e) => {
  endPickerValue.value = e.detail.value;
};

// 取消
const cancel = () => {
  close();
};

// 确认
const confirm = () => {
  const startHour = hours.value[startPickerValue.value[0]];
  const startMinute = minutes.value[startPickerValue.value[1]];
  const endHour = hours.value[endPickerValue.value[0]];
  const endMinute = minutes.value[endPickerValue.value[1]];

  const startTime = `${startHour}:${startMinute}`;
  const endTime = `${endHour}:${endMinute}`;

  // 验证结束时间必须大于开始时间
  if (
    endHour < startHour ||
    (endHour === startHour && endMinute <= startMinute)
  ) {
    uni.showToast({
      title: "结束时间必须大于开始时间",
      icon: "none",
    });
    return;
  }

  const businessHours = `${startTime}-${endTime}`;

  emit("update:modelValue", businessHours);
  emit("confirm", businessHours);
  close();
};
</script>

<style lang="scss" scoped>
.business-hours-modal {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-cancel {
  font-size: 28rpx;
  color: #999;
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.picker-confirm {
  font-size: 28rpx;
  color: #ffa726;
}

.time-sections {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
}

.time-section {
  flex: 1;

  .section-label {
    text-align: center;
    padding: 24rpx 0 16rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.time-separator {
  padding: 0 20rpx;
  margin-top: 80rpx;

  .separator-text {
    font-size: 32rpx;
    color: #999;
  }
}

.picker-view {
  height: 340rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68rpx;
  font-size: 32rpx;
  color: #333;
}
</style>
